<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <h1>MVVM : model View ViewModel</h1>
    <p>类似Spring MVC，有data Model，View 页面，ViewModel（Vue 对象）</p>
    <p>ViewModel: DomListener & Data Bindings</p>
    <hr>
    <div id="root">
        <h2>view:</h2>
        <!-- 所有Vue有的属性，都能看见 -->
        <h2>{{viewModel}}</h2>
        <p>$options</p>
        <h2>{{$options}}</h2>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        // const vue = 
        console.log("new Vue: viewModel, const vm");
        // 
        const vm = new Vue({
            
          el: "#root",
        // data的函数式写法。
           data() {
               console.log(this) // vue
               return {
                viewModel:  " model"
               }
           },
            // data:function(){
            //     console.log(this) // vue
            //    return {
            //     msg:{
            //         message: "$mount"
            //     },
            //     url:"https://www.baidu.com/"
            //    }
            // }
            // data: ()=>{
            //     // 建议不要使用箭头函数，不然Vue所管理的函数变为window托管。
            //     console.log(this) // window
            //    return {
            //     msg:{
            //         message: "$mount"
            //     },
            //     url:"https://www.baidu.com/"
            //    }
            // }
        }); // vm
    </script>
</body>
</html>